<template>
	 <!-- 记录列表 - 使用v-for循环渲染 -->
	    <view class="record-list">
	      <!-- 循环渲染每条记录 -->
	      <view 
	        class="record-item" 
	        v-for="(record, index) in recordList" 
	        :key="index"
	        @click="goToDetail(record)"
	      >
	        <view class="no">NO：{{ record.no }}</view>
	        
	        <view class="item-content">
	          <view class="item-row">检测产品：{{ record.product }}</view>
	          <view class="item-row">生产公司：{{ record.company }}</view>
	          <view class="item-row">检查时间：{{ record.checkTime }}</view>
	          
	          <!-- 循环渲染检查项 -->
	          <view class="item-row" v-for="(item, i) in record.items" :key="i">
	            <text 
	              :class="['tag', item.status === '合格' ? 'tag-pass' : 'tag-fail']"
	            >
	              {{ item.label }}：{{ item.status }}
	            </text>
	          </view>
	        </view>
	        
	        <view class="arrow">→</view>
	      </view>
	    </view>
	
	    <!-- 空状态提示 -->
	    <view class="empty-state" v-if="recordList.length === 0">
	      <text class="empty-icon">📋</text>
	      <text class="empty-text">暂无检查记录</text>
	    </view>
	  
	</template>
	
	<script>
	export default {
	  data() {
	    return {
	      // 检查记录数据（实际项目中可从接口获取）
	      recordList: [
	        {
	          no: "5101172023080800042",
	          product: "玉米",
	          company: "六六六生产主体",
	          checkTime: "2023-08-09 13:32:00",
	          items: [
	            { label: "合格证开具是否规范", status: "合格" },
	            { label: "是否使用禁限农药、兽药", status: "合格" }
	          ]
	        },
	        {
	          no: "5101172023080800027",
	          product: "白菜",
	          company: "六六六生产主体",
	          checkTime: "2023-08-09 13:49:43",
	          items: [
	            { label: "合格证开具是否规范", status: "合格" },
	            { label: "是否使用禁限农药、兽药", status: "不合格" }
	          ]
	        },
	        {
	          no: "5101172023080200024",
	          product: "玉米",
	          company: "六六六生产主体",
	          checkTime: "2023-08-09 14:06:31",
	          items: [
	            { label: "合格证开具是否规范", status: "不合格" },
	            { label: "是否使用禁限农药、兽药", status: "合格" },
	            { label: "包装标识是否合规", status: "合格" }
	          ]
	        }
	      ]
	    };
	  },
	  methods: {
	    // 返回上一页
	    goBack() {
	      uni.navigateBack();
	    },
	    // 跳转到详情页
	    goToDetail(record) {
	      uni.navigateTo({
	        url: `/pages/checkRecordDetail/checkRecordDetail?no=${record.no}`
	      });
	    },
	    // 搜索功能
	    handleScan() {
	      uni.showToast({
	        title: "搜索功能待实现",
	        icon: "none"
	      });
	    },
	    // 显示菜单
	    showMenu() {
	      uni.showActionSheet({
	        itemList: ["刷新列表", "筛选记录", "导出数据"],
	        success: (res) => {
	          console.log("选中了第" + (res.tapIndex + 1) + "个选项");
	        }
	      });
	    }
	  }
	};
	</script>
	
	<style scoped>
	.check-record-list-page {
	  background-color: #f5f5f5;
	  min-height: 100vh;
	}
	
	/* 头部样式 */
	.header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  background-color: #00b341;
	  color: #fff;
	  padding: 20rpx 30rpx;
	  position: relative;
	}
	
	.back {
	  width: 60rpx;
	  height: 60rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.back-icon {
	  font-size: 36rpx;
	}
	
	.title {
	  font-size: 34rpx;
	  font-weight: 500;
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	}
	
	.menu {
	  display: flex;
	  align-items: center;
	}
	
	.scan-icon,
	.menu-icon {
	  font-size: 36rpx;
	  margin-left: 30rpx;
	}
	
	/* 列表样式 */
	.record-list {
	  padding: 20rpx 30rpx;
	}
	
	.record-item {
	  background-color: #ececec;
	  border-radius: 10rpx;
	  padding: 25rpx;
	  margin-bottom: 20rpx;
	  display: flex;
	  flex-direction: column;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.no {
	  color: #00b341;
	  font-size: 28rpx;
	  margin-bottom: 20rpx;
	  font-weight: 500;
	}
	
	.item-content {
	  display: flex;
	  flex-direction: column;
	}
	
	.item-row {
	  font-size: 28rpx;
	  color: #333;
	  margin-bottom: 15rpx;
	  line-height: 1.5;
	}
	
	.item-row:last-child {
	  margin-bottom: 0;
	}
	
	/* 状态标签样式 */
	.tag {
	  padding: 3rpx 15rpx;
	  border-radius: 50rpx;
	  font-size: 26rpx;
	  margin-left: 10rpx;
	}
	
	.tag-pass {
	  background-color: #4cd964;
	  color: #fff;
	}
	
	.tag-fail {
	  background-color: #ff3b30;
	  color: #fff;
	}
	
	.arrow {
	  color: #c9c9c9;
	  font-size: 32rpx;
	  align-self: flex-end;
	  margin-top: 15rpx;
	}
	
	/* 空状态样式 */
	.empty-state {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 100rpx 0;
	  color: #999;
	}
	
	.empty-icon {
	  font-size: 80rpx;
	  margin-bottom: 30rpx;
	}
	
	.empty-text {
	  font-size: 32rpx;
	}
	</style>
